<template>
    <div>
        <!-- 添加警告类型弹框 -->
        <a-modal :visible="isdisabled" @cancel="onCloseIconFn('addshebei')" width="70%" title="修改监测项" centered :maskClosable="false" destroyOnClose>
            <div class="typeInput">
                <span class="lable-class">监测类型</span>
                <a-tree-select v-model="istrue" @change="changes" style="width:240px" :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }" :tree-data="treeData" placeholder="请选择异常警告类型" treeNodeFilterProp="title" :replaceFields="{title: 'name',value: 'id',children: 'waringTypePoList',}" show-search allow-clear>
                    <a-icon slot="suffixIcon" type="caret-down" />
                </a-tree-select>
            </div>
            <div class="tancuangbox">
                <div class="tanchuang-left">
                    <div class="left-table">
                        <a-table :row-selection="{type:'radio',selectedRowKeys:selectedRowKeys,onChange:onChange1}" :columns="columns1" :data-source="tabledata" :pagination="false" :rowKey="record=> record.maxValue" :hideDefaultSelections="true" :scroll="{ y:300}" size="middle"></a-table>
                    </div>
                    <div class="left-button">
                        <a-button type="primary" style="color:#9fb043" @click="addNumberPop">新增</a-button>
                        <a-button type="primary" @click="addTabaleData">确定</a-button>
                    </div>
                </div>
                <div class="tanchuang-right">
                    <a-table :data-source="warningtableData" :pagination="false" :rowKey="record=> record.maxValue" :scroll="{ y:400}" size="middle">
                        <a-table-column title="警告类型" data-index="name" align="center" :ellipsis="true" />
                        <a-table-column title="警告级别" data-index="warningType" align="center" :ellipsis="true" />
                        <a-table-column title="最大值" data-index="maxValue" align="center" :ellipsis="true" />
                        <a-table-column title="最小值" data-index="minValue" align="center" :ellipsis="true" />
                        <a-table-column title="操作" align="center" width="200px">
                            <template slot-scope="text,record,index">
                                <a-button type="danger" @click="deltable(record,index)">删除</a-button>
                            </template>
                        </a-table-column>
                    </a-table>
                </div>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="submitDisabled">确定</a-button>
            </template>
        </a-modal>
        <!-- 添加弹框警告值 -->
        <a-modal :visible="isaddDisabled" @cancel="onCloseIconFn('addnum')" width="50%" title="添加异常值" centered :maskClosable="false" destroyOnClose>
            <a-form-model :model="from1" :label-col="{span:4}" :wrapper-col="{span:18}" :colon="false" :rules="rulesNum" ref="rulesfrom1" hideRequiredMark>
                <a-form-model-item label="警告级别">
                    <a-select v-model="from1.warningType" placeholder="请选择警告级别">
                        <a-select-option value="一级警告">一级警告</a-select-option>
                        <a-select-option value="二级警告">二级警告</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="最大值" prop="maxValue">
                    <a-input v-model="from1.maxValue" />
                </a-form-model-item>
                <a-form-model-item label="最小值" prop="minValue">
                    <a-input v-model="from1.minValue" />
                </a-form-model-item>
                <a-form-model-item label="是否默认选择数据">
                    <a-switch v-model="from1.isDefault" />
                </a-form-model-item>
                <a-form-model-item label="备注">
                    <a-input v-model="from1.note" type="textarea" />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="addfrom1NumFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
import util from "@/libs/util.js";
export default {
    props: {},
    data() {
        return {
            equipmentId: "",
            isdisabled: false, // 异常警报类型添加
            isaddDisabled: false, // 异常警报值添加弹框
            istrue: "",
            from1: {
                maxValue: "", //最大值
                minValue: "", //最小值
                note: "",
                isDefault: true,
            },
            treeData: [], // 警告类型下拉框数据
            warningtableData: [], // 警告数据表格
            selectedRowKeys: [], // 警告值选择框数据
            // 警告值表格
            columns1: [
                {
                    title: "最大值",
                    dataIndex: "maxValue",
                    align: "center",
                },
                {
                    title: "最小值",
                    dataIndex: "minValue",
                    align: "center",
                },
            ],
            rulesNum: {
                maxValue: [
                    {
                        required: true,
                        message: "请输入最大值",
                        trigger: "blue",
                    },
                    { validator: this.validatenumber, trigger: "blue" },
                ],
                minValue: [
                    {
                        required: true,
                        message: "请输入最小值",
                        trigger: "blue",
                    },
                    { validator: this.validatenumber, trigger: "blue" },
                ],
            },
            tabledata: [], // 警告值表格数据
        };
    },
    methods: {
        // 验证是否是数字类型
        validatenumber(rule, value, callback) {
            if (!/^[0-9]*$/.test(value)) {
                callback("请输入数字类型");
            } else {
                callback();
            }
        },
        // 获取警告类型树形图
        getTreeData() {
            // 弹框树形数据
            this.$api.GetfindByTree().then((res) => {
                if (res.data.code == 0) {
                    this.treeData = util.recursion(res.data.data);
                }
            });
        },
        // 类型选择下拉框
        changes(value, label, extra) {
            // console.log(...arguments);
            this.selectedRowKeys = [];
            this.from1.waringTypeId = value;
            this.from1.name = label[0];
            this.$api.PostabnormalfindByWaringType(value).then((res) => {
                console.log(res.data);
                if (res.data.code == 0) {
                    if (res.data.data.length <= 0) {
                        this.$message.info("此警告类型暂时没有默认警告值");
                    }
                    this.tabledata = res.data.data;
                    this.tabledata.forEach((v) => {
                        v.name = label[0];
                    });
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
        // 点击表格选择框拿到数据
        onChange1(index, data) {
            console.log(...arguments);
            this.selectedRowKeys = index;
            this.warninglist = data[0];
        },
        // 新增警告值按钮方法
        addNumberPop() {
            console.log(this.istrue);
            if (this.istrue) {
                this.isaddDisabled = true;
            } else {
                this.$message.warning("请先选择警告类型");
            }
        },
        // 点击确定按钮往右侧表格添加数据
        addTabaleData() {
            if (this.warninglist.length == 0) {
                this.$message.warning("请先选择警告值");
            } else {
                var isData = this.warningtableData.some((v) => {
                    return v.waringTypeId == this.warninglist.waringTypeId;
                });
                if (isData) {
                    this.$message.warning("类型警告值已选择");
                } else {
                    this.warningtableData.push(this.warninglist);
                }
            }
        },
        //异常值弹框新增确定按钮
        addfrom1NumFn() {
            this.$refs.rulesfrom1.validate((vali) => {
                if (vali) {
                    this.tabledata.push(this.from1);
                    this.from1 = {};
                    this.isaddDisabled = false;
                }
            });
        },
        // 右侧表格删除按钮方法
        deltable(record, index) {
            if (record.id) {
                this.$api.abnormalRemove(record.id,this.equipmentId).then((res) => {
                  if(res.data.data == "操作成功"){
                    this.warningtableData.splice(index, 1);
                  }else{

                  }
                });
            }else{
              this.warningtableData.splice(index, 1);
            }
        },
        // 点击右上角关闭按钮方法
        onCloseIconFn(done) {
            var self = this;
            this.$confirm({
                title: "是否确认关闭弹窗？",
                centered: true,
                onOk() {
                    if (done == "addshebei") {
                        self.isdisabled = false;
                        self.istrue = "";
                        self.warningtableData = [];
                        self.tabledata = [];
                        self.from1 = {};
                    } else {
                        self.isaddDisabled = false;
                        self.from1 = {};
                    }
                },
                onCancel() {
                    return;
                },
            });
        },
        submitDisabled() {
            this.$api
                .abnormalEdit(this.equipmentId, {
                    equipmentAbnormalInfoEditDto: this.warningtableData,
                })
                .then((res) => {
                    if (res.data.data == true) {
                        this.isdisabled = false;
                        this.warningtableData = [];
                        this.istrue = "";
                        this.tabledata = [];
                        this.$message.info(res.data.errorMessage)
                    }else{
                      this.$message.warning(res.data.errorMessage)
                    }
                });
        },
        // 获取设备监测项
        getData() {
            this.$api
                .abnormalFindByEquipmentId(this.equipmentId)
                .then((res) => {
                    this.warningtableData = res.data.data;
                });
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
// 弹窗样式
::v-deep .ant-modal-body {
    padding: 0 24px;
    .ant-input-disabled{
      background: none;
    }
    .typeInput {
        width: 100%;
        height: 7%;
        margin-bottom: 20px;
        .lable-class {
            font-size: 16px;
            color: #9fb043;
            display: inline-block;
            width: 80px;
        }
        ::v-deep .ant-select {
            width: calc(100% - 80px);
        }
    }
    .tancuangbox {
        height: 500px;
        display: flex;

        .tanchuang-left {
            width: 30%;
            padding-right: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .left-table {
                height: 80%;
            }
            .left-button {
                height: 8%;
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
            }
        }
        .tanchuang-right {
            width: 70%;
            .tanchuang-table {
                height: 70%;
            }
        }
    }
}
</style>